<template>
  <div>
    <p>获取浏览器基本信息:{{ location }}</p>
    <p v-if="!isSupported">Your browser does not support clipboard API.</p>
    <div v-else>
      <input v-model="input" type="text" />
      <button @click="copy(input)">Copy</button>
      <p>text:{{ text }}</p>
    </div>
    <br/>
    <button ref="element">useEventListener</button>
    <p>{{ msg }}</p>
    <hr/>
    <p ref="el" :style="{ color }">得即高歌失即休</p>
    <button @click="toggle">切换颜色</button>
    <br/>
    <div class="mb-1">选择文件:</div>
    <input type="file" @change="onFileChange" />
    <div class="mt-4 mb-1">Object URL:</div>
    <code>
      <a v-if="url" :href="url" target="_blank">{{ url }}</a>
      <span v-else>none</span>
    </code>
    <br/>
    <p v-if="isLargeScreen">This is a large screen</p>
    <p v-else>This is a small screen</p>
    <p>isPreferredDark:{{ isPreferredDark ? '黑夜' : '白天' }}</p>
  </div>
</template>

<script setup>
import { ref, shallowRef } from 'vue'
import {
  useBrowserLocation,
  useClipboard,
  useEventListener,
  useCssVar,
  useObjectUrl,
  useMediaQuery
} from '@vueuse/core'

// 获取浏览器基本信息 host、origin、hostname这些
const location = useBrowserLocation()
console.log(location)

//text 复制的内容
//copy 是复制的函数
// isSupported 判断当前的浏览器是否支持这个api
const input = ref('')
const { text, copy, isSupported } = useClipboard()

// vueuse事件绑定
const element = ref(null)
const msg = ref('')
useEventListener(element, 'click', () => {
  msg.value = '我正在监听你!'
})

// useCssVar
const el = ref(null)
const color = useCssVar('--color', el)
const toggle = () => {
  color.value = color.value === '#7fa998' ? '#df8543' : '#7fa998'
}

// useObjectUrl
const file = shallowRef()
const url = useObjectUrl(file)

function onFileChange(e) {
  const target = e.target
  const files = target.files
  file.value = files && files.length > 0 ? files[0] : undefined
}

// 媒体查询
const isLargeScreen = useMediaQuery('(min-width: 1024px)')
const isPreferredDark = useMediaQuery('(prefers-color-scheme: dark)')
</script>
